<template>
	<view class="content" style="height: 100vh;">
		<view class="dis_f aic mt30"
			style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				头像
			</view>
			<button open-type="chooseAvatar" class="avatar-wrapper" @chooseavatar="onChooseAvatar">

				<image class="avatar" :src="head_img"></image>
			</button>
		</view>
		<view class="dis_f aic" style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				昵称
			</view>
			<view class="item-centent">
				<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickname" @blur="bindblur"
					@input="bindinput" placeholder-style="font-size:26rpx;color:#BDBDBD" style="font-size: 26rpx;" />
			</view>
		</view>
		<view class="dis_f aic" style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				姓名
			</view>
			<view class="item-centent">
				<input type="text" class="weui-input" placeholder="请输入姓名" v-model="reaname"
					placeholder-style="font-size:26rpx;color:#BDBDBD" style="font-size: 26rpx;" />
			</view>
		</view>
		<view class="dis_f aic" style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				联系方式
			</view>
			<view class="item-centent">
				<input type="number" class="weui-input" placeholder="请输入联系方式" v-model="mobile"
					placeholder-style="font-size:26rpx;color:#BDBDBD" style="font-size: 26rpx;" :disabled="mobile == ''?'false':'true'"/>
			</view>
		</view>

		<view class="dis_f aic" style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				银行卡号
			</view>
			<view class="item-centent">
				<input type="text" placeholder="请输入银行卡号" v-model="bank_sn"
					placeholder-style="font-size:26rpx;color:#BDBDBD" style="font-size: 26rpx;" />
			</view>
		</view>
		<view class="dis_f aic" style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				开户行姓名
			</view>
			<view class="item-centent">
				<input type="text" placeholder="请输入开户行姓名" v-model="bank_reaname"
					placeholder-style="font-size:26rpx;color:#BDBDBD" style="font-size: 26rpx;" />
			</view>
		</view>
		<view class="dis_f aic" style="background-color: #FFF;padding-left: 30rpx; border-bottom: 1px solid #efefef;">
			<view class="fs28 fwb">
				开户行
			</view>
			<view class="item-centent">
				<input type="text" placeholder="请输入银行开户行" v-model="bank_name"
					placeholder-style="font-size:26rpx;color:#BDBDBD" style="font-size: 26rpx;" />
			</view>
		</view>
		<view class="dis_f juc">
			<view class="save-btn" @click="onSubmit">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				avatarUrl: '',
				nickname: '',
				mobile: "",
				head_img: '',
				reqLoading: false,
				user: "",
				reaname: "",
				bank_sn: "",
				bank_reaname: "",
				bank_name: "",

			}
		},
		onShow() {
			this.user = uni.getStorageSync('userInfo')
			this.head_img = this.user.head_img 
			this.nickname = this.user.nickname
			this.reaname = this.user.reaname
			this.mobile = this.user.mobile
			this.bank_sn = this.user.bank_sn
			this.bank_reaname = this.user.bank_reaname
			this.bank_name = this.user.bank_name
		},
		methods: {
			onSubmit() {
				if (this.head_img == '') {
					uni.showToast({
						icon: "none",
						title: '请选择头像'
					})
					return false
				}
				if (this.nickname == '') {
					uni.showToast({
						icon: "none",
						title: '请输入昵称'
					})
					return false
				}
				if (this.reaname == '') {
					uni.showToast({
						icon: "none",
						title: '请输入姓名'
					})
					return false
				}
				if (this.mobile == '') {
					uni.showToast({
						icon: "none",
						title: '请输入联系方式'
					})
					return false
				}
				if (this.bank_sn == '') {
					uni.showToast({
						icon: "none",
						title: '请输入卡号'
					})
					return false
				}
				if (this.bank_reaname == '') {
					uni.showToast({
						icon: "none",
						title: '请输入开户人名称'
					})
					return false
				}
				if (this.bank_name == '') {
					uni.showToast({
						icon: "none",
						title: '请输入开户行'
					})
					return false
				}
				this.api.post('user/updateMymsg', {
					nickname: this.nickname,
					head_img: this.head_img,
					reaname: this.reaname,
					mobile: this.mobile,
					bank_sn: this.bank_sn,
					bank_reaname: this.bank_reaname,
					bank_name: this.bank_name,
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							icon: "none",
							title: '保存成功'
						})

						setTimeout(function() {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}, 1000)
					}
				})

			},
			onChooseAvatar(e) {
				console.log(e)
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				uni.showLoading({
					title: '加载中'
				});
				uni.uploadFile({
					url: uni.getStorageSync('httpip') + 'user/uploadFile',
					filePath: avatarUrl,
					name: 'file',
					header: {
						token: uni.getStorageSync('token'),
					},
					success: uploadFileRes => {
						// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);
						console.log(data)
						if (data.code == 200) {
							self.head_img = data.data.file;
						}
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			saveProfile() {

			},
			bindblur(e) {
				console.log(e)
				this.nickname = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				console.log(e)
				this.nickname = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},

		}
	}
</script>

<style lang="scss" scoped>
	.item-centent {
		background-color: #fff;
		height: 100rpx;
		width: 75%;
		margin-left: 30rpx;
		border-radius: 12rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 18rpx;
	}


	.avatar-wrapper {
		padding: 0;
		margin: 0 0 30rpx 30rpx;
		height: 100rpx;

	}

	input {
		font-size: 26rpx;
		color: #333;
		width: 100%;
		height: 100%;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.save-btn {
		width: 92%;

		background: #feb746;
		color: #fff;
		// position: fixed;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 350rpx;
		border-radius: 12rpx;
		// bottom: calc(50rpx + env(safe-area-inset-bottom));
	}
</style>